<template>
  <!--本页只有一行内容-->
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card class="user-card" shadow="hover" :body-style="{ padding: '10px' }">
        <div class="user">
          <img :src="userInfo.icon" alt="头像">
          <div class="user-info">
            <p class="name">{{userInfo.name}}</p>
            <p class="access">超级管理员</p>
          </div>
          <hr>
          <div class="login-info">
            <p>上次登录时间：<span>2022/6/1</span></p>
            <p>上次登录地点：<span>浙江省宁波市</span></p>
          </div>
        </div>
      </el-card>
      <!--表格-->
      <el-card class="buy-card">
        <el-table :data="tableData" stripe height="450">
          <el-table-column v-for="col in tableColumn" :key="col.prop" :prop="col.prop" :label="col.label">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <!--图标-->
      <div class="num">
        <el-card v-for="item in countData" :key="item.id"
                 :body-style="{display:'flex',padding:0,flexWrap:'wrap'}">
          <i class="icon" :class="'el-icon-'+item.icon" :style="{background:item.color}"></i>
          <div>
            <p class="num">￥{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 280px; margin: 10px;">
        <div style="height: 280px;width: 100%;" ref="echarts"></div>
      </el-card>
      <el-col :span="12">
        <el-card style="height: 260px;">
          <div style="width: 100%;height: 260px;" ref="userEcharts"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 260px;">
          <div style="width: 100%;height: 260px;" ref="videoEcharts"></div>
        </el-card>
      </el-col>

    </el-col>
  </el-row>
</template>

<script>
import {getData} from "@/http/data";
import * as echarts from "echarts";
import {mapGetters} from 'vuex'

export default {
  name: "Home",
  data() {
    return {
      tableData: [],
      tableColumn: [
        {prop: 'name', label: '品牌'},
        {prop: 'todayBuy', label: '今日购买'},
        {prop: 'monthBuy', label: '本月购买'},
        {prop: 'totalBuy', label: '总购买'},
      ],
      countData: [],
    }
  },
  computed: {
    ...mapGetters('login', ['userInfo'])
  },
  mounted() {
    getData().then(response => {
      const {code, data} = response.data
      if (code === 20000) {
        this.tableData = data.tableData
        this.countData = data.countData

        // 折线图
        let order = data.orderData
        let keyArray = Object.keys(order.data[0]) /*提取数组中第一个元素的所有key值*/
        let series = []
        keyArray.forEach(key => {
          series.push({
            name: key,
            data: order.data.map(item => item[key]), /*提取数组中每个元素对应key值的数据，返回数组*/
            type: 'line'
          })
        })
        let options = {
          tooltip: {
            trigger: 'item',
          },
          xAxis: {
            data: order.date
          },
          yAxis: {},
          legend: {
            data: keyArray
          },
          series
        }
        echarts.init(this.$refs.echarts).setOption(options)

        // 柱状图
        let userOptions = {
          legend: {
            textStyle: {
              color: '#333',
            }
          },
          grid: {
            left: '20%'
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            data: data.userData.map(user => user.data),
            axisLine: {
              lineStyle: {
                color: "#17b3a3"
              }
            },
            axisLabel: {
              interval: 0,
              color: '#333'
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#17b3a3'
              }
            }
          },
          color: ['#2ec7c9', '#b6a2de'],
          series: [
            {
              name: '新增用户',
              data: data.userData.map(user => user.new),
              type: 'bar'
            },
            {
              name: '活跃用户',
              data: data.userData.map(user => user.active),
              type: 'bar'
            },
          ]
        }
        echarts.init(this.$refs.userEcharts).setOption(userOptions)

        // 饼图
        let videoOptions = {
          tooltip: {
            trigger: 'item',
          },
          color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
          series: [
            {
              data: data.videoData,
              type: 'pie'
            }
          ]
        }
        echarts.init(this.$refs.videoEcharts).setOption(videoOptions)
      }
    })
  }
}
</script>

<style scoped lang="less">
.user-card, .buy-card {
  min-width: 400px;
}

.buy-card {
  margin-top: 10px;
}

.user {
  img {
    width: 50%;
    vertical-align: middle; /*让img和div水平*/
  }

  .user-info {
    display: inline-block;
    margin-left: 20px;
    margin-top: 30px;
    vertical-align: middle;

    .name {
      font-size: 20px;
      font-weight: bold;
    }

    .access {
      color: rgba(0, 0, 0, 0.52);
    }
  }
}

.num {
  display: flex;
  flex-wrap: wrap;

  .el-card {
    width: 30%;
    margin: 5px 1%;
    height: 50px;
  }

  .icon {
    display: inline-block;
    text-align: center;
    width: 25%;
    font-size: 30px;
    line-height: 50px;
    color: #ffffff;
  }

  p {
    padding: 0;
    margin: 0;
  }

  .num {
    font-size: 20px;
    font-weight: bold;
  }

  .txt {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>
